/*
 * @Author: yangzonglong
 * @Date: 2021-03-05 12:08:36
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-07-24 22:55:42
 * @Auditor:
 */
import React, { useRef, useEffect } from 'react';
import { Form, DatePicker } from 'antd';
import { FormItemProps } from '../../components/components/InputFormItemController';
import { DatePickerProps as AndtdDatePickerProps } from 'antd/lib/date-picker';
import useQueryControlWrap from '../../hooks/useQueryControlWrap';
import { CanvasItemProps } from './../../interface';
import moment, { Moment } from 'moment';

const modeMap = {
  'YYYY/MM': 'month',
  'YYYY/MM/DD': 'date',
  'YYYY/MM/DD HH:mm:ss': 'date',
};

type ExtraAndtdDatePickerProps = AndtdDatePickerProps & {
  placeholderEn?: string;
  rangePicker?: boolean;
  isInitialValue?: boolean;
};
export interface DatePickerProps extends CanvasItemProps {
  formItemProps?: FormItemProps;
  datePickerProps?: ExtraAndtdDatePickerProps;
  readOnly?: boolean;
  disabled?: boolean;
}

interface BridgeDatePickerProps {
  datePickerProps?: ExtraAndtdDatePickerProps;
  value?: string | null | Moment | string;
  initialValue?: string | null | Moment;
  isInitialValue?: boolean;
  onChange?(date: any, id: string): void;
  disabled?: boolean;
  isDesign?: boolean;
  id?: string;
}

const BridgeDatePicker = ({ datePickerProps, value, isInitialValue, disabled, onChange, id }: BridgeDatePickerProps) => {
  const isChanged = useRef(false);
  const format = (datePickerProps?.format || '') as string;
  const showTime = { showTime: (format as string).includes(':mm:') };

  useEffect(() => {
    if (isChanged.current || datePickerProps?.rangePicker) return;
    isChanged.current = true;
    if (value) {
      onChange?.(value + '#noImplementChangeScript', id as string);
    } else {
      if (value === null || value === undefined) return;
      setTimeout(() => {
        const _value = isInitialValue ? moment().format(format) : undefined;
        onChange?.(_value + '#noImplementChangeScript', id as string);
      }, 10);
    }
  }, [onChange, isInitialValue, format, value, datePickerProps?.rangePicker]);

  const placeholder = localStorage.i18nextLng === 'en' ? datePickerProps?.placeholderEn : datePickerProps?.placeholder;

  return datePickerProps?.rangePicker ? (
    <DatePicker.RangePicker
      {...showTime}
      picker={modeMap[format as string]}
      disabled={disabled}
      style={{ width: '100%' }}
      value={Array.isArray(value) ? [moment(value[0]), moment(value[1])] : undefined}
      onChange={(e) => {
        if (e) {
          onChange?.([moment(e[0]).format(format as string), moment(e[1]).format(format as string)], id!);
        } else {
          onChange?.(null, id!);
        }
      }}
    />
  ) : (
    <DatePicker
      {...showTime}
      picker={modeMap[format as string]}
      disabled={disabled}
      style={{ width: '100%' }}
      value={value === 'undefined' ? undefined : typeof value === 'string' ? moment(value) : value}
      onChange={(e) => onChange?.(e ? moment(e).format(format as string) : null, id!)}
      {...datePickerProps}
      placeholder={placeholder}
    />
  );
};

const App = (props: DatePickerProps) => {
  const { disabled, readOnly, datePickerProps, formItemProps, domComplete, ...canvasProps } = props;
  useQueryControlWrap(canvasProps.id, formItemProps?.name, domComplete);

  const label = localStorage.i18nextLng === 'en' ? formItemProps?.labelEn : formItemProps?.label;

  return (
    <Form.Item {...formItemProps} {...canvasProps} label={label}>
      <BridgeDatePicker
        initialValue={datePickerProps?.isInitialValue ? formItemProps?.initialValue : null}
        disabled={disabled || formItemProps?.disabled}
        datePickerProps={datePickerProps}
        isDesign={props.isDesign} />
    </Form.Item>
  );
};

export default App;
